<template>
<div class="TPmydiv1">
<div class="PxOLPdiv1">
    <el-row class="OLrow0">
        <el-col :span="10" style="margin-left:15px">
            <div style="font-size:14px;font-weight:700">hggood自营</div>
            <div style="color:rgb(141,141,141);margin-top:3px">订单编号:22030254512083</div>
        </el-col>
        <el-col :span="13" >
                <div style="margin-top:10px;float:right;margin-right:10px;color:rgb(141,141,141);">
                    <span style="margin-right:20px;color:rgb(101,101,101);">订单详情</span>
                    <span style="margin-right:10px">已取消订单</span></div>
        </el-col>
    </el-row>
    <el-row class="OLrow1"  type="flex" justify="center"
    v-for="(data,index) in abc" :key="index">
        <el-col :span="24" class="OLdiv1col1">
            <el-row class="OLrow2"  type="flex" justify="left">
                <img src="../../../assets/portal/21ThinkPad_New_S1/3.jpg" class="PImg">
                <div class="OLcol1div1" style="width: 150px;">
                    <span style="cursor:pointer;"
                    >Envy13十一代酷睿i5轻薄便携办公用商务学生笔记本电脑Envy13十一代酷睿i5轻薄便携办公用商务学生笔记本电脑</span>
                </div>
                <div class="OLcol1div11" style="margin-top:58px">
                    <span style="color: rgb(131, 131, 131);">标配：i5-10210U/8G内存/512G</span>
                </div>
                <div class="OLcol1div12">
                    <div style="margin-top:18px">￥2899.00</div>
                    <div style="margin-top:22px">×1</div>
                </div>
            </el-row>
        </el-col>
    </el-row>
    <el-row class="OLrow3" type="flex" justify="center" >
        <el-col :span="11">
            <span class="deletebtn" @click="deletebtn">删除订单</span>
        </el-col>
        <el-col :span="13">
            <span>共<strong>2</strong>件商品</span>
            <span style="margin-left:20px"><strong>应付 ￥7588.00</strong></span>
        </el-col>
    </el-row>
</div>
<div class="PxOLPdiv1">
    <el-row class="OLrow0">
        <el-col :span="10" style="margin-left:15px">
            <div style="font-size:14px;font-weight:700">hggood自营</div>
            <div style="color:rgb(141,141,141);margin-top:3px">订单编号:22030254512083</div>
        </el-col>
        <el-col :span="13" >
                <div style="margin-top:10px;float:right;margin-right:10px;color:rgb(141,141,141);">
                    <span style="margin-right:20px;color:rgb(101,101,101);">订单详情</span>
                    <span style="margin-right:10px">已取消订单</span></div>
        </el-col>
    </el-row>
    <el-row class="OLrow1"  type="flex" justify="center"
    v-for="(data,index) in abc" :key="index">
        <el-col :span="24" class="OLdiv1col1">
            <el-row class="OLrow2"  type="flex" justify="left">
                <img src="../../../assets/portal/21ThinkPad_New_S1/3.jpg" class="PImg">
                <div class="OLcol1div1" style="width: 150px;">
                    <span style="cursor:pointer;"
                    >Envy13十一代酷睿i5轻薄便携办公用商务学生笔记本电脑Envy13十一代酷睿i5轻薄便携办公用商务学生笔记本电脑</span>
                </div>
                <div class="OLcol1div11" style="margin-top:58px">
                    <span style="color: rgb(131, 131, 131);">标配：i5-10210U/8G内存/512G</span>
                </div>
                <div class="OLcol1div12">
                    <div style="margin-top:18px">￥2899.00</div>
                    <div style="margin-top:22px">×1</div>
                </div>
            </el-row>
        </el-col>
    </el-row>
    <el-row class="OLrow3" type="flex" justify="center" >
        <el-col :span="11">
            <span class="deletebtn" @click="deletebtn">删除订单</span>
        </el-col>
        <el-col :span="13">
            <span>共<strong>2</strong>件商品</span>
            <span style="margin-left:20px"><strong>应付 ￥7588.00</strong></span>
        </el-col>
    </el-row>
</div>
<div style="font-size:13px;text-align: center;margin-top:20px">快去加购订单吧！到底了...</div>
</div>
</template>

<script>
export default {
    name:'PxOLTestPage',
        data(){
            return{
                DetailsStyle:'',
                DeleteStyle:'',
                MyOrderData:'',
                imgshow:'',
                abc:[{0:'sadas'},{1:'dsadsa'},{2:'dsada'},{3:'dsa'}],
                weizhi:'',
                weizhi2:'',
            }
        },
        mounted(){
        },
        methods:{
            deletebtn(){
                console.log('deletebtn!');
            },
        },
}
</script>

<style scoped>
.TPmydiv1{
    margin-bottom: 80px;
}
.PxOLPdiv1{
    border-bottom: 1px solid rgb(221, 221, 221);
    border-radius: 15px;
    background-color: rgb(255, 255, 255);
}
.OLrow0{
    margin: 0px auto;
    max-width: 1000px;
    font-size: 12px;
    height: 100%;
    margin-top: 20px;
    padding-top: 10px;
}
.OLrow3{
    margin-top: 10px;
    height: 30px;
    font-size: 13px;
    padding-bottom: 35px;
}
.OLrow2{
    height: 92px;
    /* border-bottom: 1px solid rgb(221, 221, 221); */
}
.OLrow1{
    margin: 0px auto;
    max-width: 1000px;
    text-align: center;
    font-size: 12px;
    height: 100%;
    
}
.PImg{
    margin-top: 10px;
    margin-left: 10px;
    float: left;
    width: 70px;
    height: 70px;
    cursor: pointer;
}
.OLcol1div1{
    margin-left: 82px;
    margin-top: 12px;
    position: absolute;
    overflow: hidden;
    /* white-space: nowrap; 溢出不换行*/
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.OLcol1div11{
    width: 150px;
    margin-left: 87px;
    margin-top: 18px;
    position: absolute;
    overflow: hidden;
    white-space: nowrap; 
    text-overflow: ellipsis;
}
.OLcol1div12{
    margin-left: 220px;
    text-align: right;
}
.deletebtn{
    border-radius: 10px;
    padding: 8px;
    padding-bottom: 4px;
    padding-top: 4px;
    border: 1px solid rgb(0, 0, 0);
    margin-left: 20px;
}
</style>